<template>
  <div class="home">
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="home_nav">
        <div class="home_nav1">
          <ul class="ul">
            <li @click="$router.push({path:'/kc'})">
              <p>特色课</p>
            </li>
            <li @click="$router.push({path:'/fd'})">
              <p>一对一辅导</p>
            </li>
            <li @click="$router.push({path:'/xxrl'})">
              <p>学习日历</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="shen">
        <div class="zs">资深讲师</div>
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
      </div>
      <div class="shen">
        <div class="zs">推荐课程</div>
        <div v-for="(item,index) in list" :key="index" class="kc" @click="onClickLeft">
          <p>{{item.title}}</p>
          <p>共点击量</p>
          <van-image width="50" height="50" lazy-load src="https://img01.yzcdn.cn/vant/cat.jpeg" />
          <p>{{item.id}}人报名</p>
          <em>{{item.price}}</em>
        </div>
      </div>
      <div class="shen">
        <div class="zs">名师</div>
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
        <van-card
          desc="全栈开发经理"
          title="谢文"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          @click="$router.push({path:'/xq'})"
        />
      </div>
      <div class="div"></div>
    </div>
  </div>
</template>

<script>
import { Lazyload } from "vant";
Vue.use(Lazyload);
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
import { Image as VanImage } from "vant";
export default {
  // 组件状态值
  data() {
    return {
      images: [
        "http://120.53.31.103:84/uploads/image/2021-09-08/lXEERcH4CIb3reka5yruT7RW7jMD4K7vreK6utgq.jpeg",
        "http://120.53.31.103:84/uploads/image/2021-09-08/pihYvxiYLTL5XCVs0sMFzlvY2TfSUj95Tz0IWjgF.jpeg",
        "http://120.53.31.103:84/uploads/image/2021-09-08/zP1osWNNxyfKSX1Dt6IDUUh5Vpz8AxD39BBaQECW.jpeg",
      ],
      list: [],
    };
  },
  // 生命周期
  mounted() {
    this.$axios
      .get("http://120.53.31.103:84/api/app/courseBasis")
      .then((res) => {
        this.list = res.data.data.list;
      });
  },
  // 组件方法
  methods: {
    onClickLeft() {
      this.$router.push("/tj");
    },
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 过滤器
  filters: {},
  // 自定义指令
  directives: {},
};
</script> 

<style scoped>
img {
  width: 100%;
  height: 100px;
}
.app {
  position: relative;
  background: #f2f3f5;
}
.ul {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
li {
  width: 90px;
  height: 90px;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  line-height: 80px;
  border-radius: 10px;
}
.home_nav1 {
  height: 100px;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 85px;
}
.home_nav {
  width: 100%;
  height: 82px;
  background: #f2f3f5;
}
.zs {
  border-left: 4px solid #ff0000;
  background: #f2f3f5;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
.shen {
  padding-left: 10px;
  background: #f2f3f5;
  padding-right: 10px;
  padding-top: 10px;
}
.kc {
  width: 100%;
  height: 150px;
  background: white;
  display: flex;
  margin-bottom: 10px;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 10px;
  position: relative;
}
p {
  margin: 0 10px;
}
.van-image {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: 10px;
}
em{
  float: right;
  width: 50px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.div{
  height: 60px;
  background: #f2f3f5;
  width: 100%;
}

</style>
